<template>
  <div class="overall-page page">

  </div>
</template>
<script>
export default {
  data() {
    return {
      charts: {
      },
    }
  },
  watch: {

  },
  methods: {
    //选择拿值
    changeSelect(e){
      console.log(e)
    },
    async initChart(id) {
      if (!this.charts[id]) {
        this.charts[id] = this.$echarts.init(document.getElementById(id));
        this.charts[id].showLoading({
          text: '加载中',
          textColor: '#fff',
          maskColor: 'rgba(0,0,0,0)'
        })
      }
      let option = await this[id + 'Option']();
      this.charts[id].setOption(option);
      this.charts[id].hideLoading();
    },
    async arricultureMapOption() {
      let dataList = [{}];
      let electricPileIcon = '';
      let geoCoordMap = {};
      const geoJson = require('@/assets/geo/suzhouqu.json');
      this.$echarts.registerMap('szq', {geoJSON: geoJson});
      geoJson.features.forEach(function (v) {
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.centroid;
      });
      let size = '40%';
      let roam = false;
      let zoom = 3;
      return {
        geo: [{
          animationDuration: 0,
          animationDurationUpdate: 0,
          layoutCenter: ['50%', '55%'],//位置
          layoutSize: size,//大小
          show: true,
          map: 'szq',
          roam,
          zoom,
          aspectScale: 1,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          select: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: {
                type: "linear",
                x: 6000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            }
          },
          emphasis: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: {
                type: "linear",
                x: 6000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                type: "linear",
                x: 6000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            },
          }
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -1,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "56%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor:"rgba(17, 149, 216,0.6)",
              borderColor: "rgba(58,149,253,0.8)",
              shadowColor: "rgba(172, 122, 255,0.5)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -2,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "57%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(57, 132, 188,0.4)",
              borderColor: "rgba(58,149,253,0.6)",
              shadowColor: "rgba(65, 214, 255,1)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "transpercent",
            },
          },
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -3,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "58%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(58,149,253,0.4)",
              shadowColor: "rgba(58,149,253,1)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "transpercent",
            },
          },
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -4,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "59%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 5,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(5,9,57,0.8)",
              shadowColor: "rgba(29, 111, 165,0.8)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        },],
        series: [
          {
            animationDuration: 0,
            animationDurationUpdate: 0,
            type: 'map',
            map: 'szq',
            geoIndex: 0,
            aspectScale: 1,//长宽比
            zoom,
            showLegendSymbol: true,
            roam,
            // markPoint: {
            //   symbol: 'image://' + electricPileIcon,
            //   symbolSize: 60,
            //   data: dataList
            // },
          },
        ],
      };
    },
  },
  beforeDestroy() {
    Object.keys(this.charts).forEach(item => {
      this.charts[item] && this.charts[item].dispose();
      this.charts[item] = null;
    })
  },
  async mounted() {
    Object.keys(this.charts).forEach(item => {
      this.initChart(item);
    });
  }
}
</script>
<style lang="scss" scoped>
.overall-page {
  position: relative;
  padding:90px 20px 20px 20px;
  .overall-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    position: relative;
    z-index: 9;
  }
  .cusHeight{
    height: 260px;
  }
  .top-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-item{
      width: calc(29% - 10px);
    }
    .top-item1{
      width:42%;
      height: 550px;
    }

  }
  .info-block{
    width: 100%;
    .info-container{
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 15px;
      .info-item:nth-child(3n){
        margin-right: 0;
      }
      .info-item{
        width: calc((100% - 30px) / 3);
        margin-right: 15px;
      }
    }
  }
}

</style>
